import React , { useState, RefObject,useEffect  } from 'react'
import { ArrowLeft, WapHome, WeappNav } from '@react-vant/icons'
import { useNavigate,useLocation } from 'react-router-dom';
import {DatePicker, Form} from 'antd-mobile'
import dayjs from 'dayjs';
import style from './attdetail.module.css'
import Shaxiang from './Shaxiang.jsx';
// import type { DatePickerRef } from 'antd-mobile/es/components/date-picker'

export default function Attdetail() {

  useEffect(() => {
    // 进入页面时设置
    const html = document.documentElement;
    const oldFontSize = html.style.fontSize;
    const setRem = () => {
      const width = html.clientWidth < 750 ? 750 : html.clientWidth;
      html.style.fontSize = (width / 750) * 75 + 'px';
    };
    setRem();
    window.addEventListener('resize', setRem);

    // 离开页面时恢复
    return () => {
      window.removeEventListener('resize', setRem);
      html.style.fontSize = oldFontSize || '';
    };
  }, []);
  const navigate=useNavigate()
  const location = useLocation();
  const attendanceData = location.state?.data;
  useEffect(() => {
    if (!attendanceData) {
      navigate(-1);  // 如果没有数据则返回上一页
      return;
    }
    console.log('接收到的考勤数据:', attendanceData);
  }, []);

  const [selectedDate, setSelectedDate] = useState(null);

  const [list, setList] = useState(() => {
    let array = localStorage.getItem('user')
    return array ? JSON.parse(array) : []
  })
  console.log(list);
  
  return (
    <div>
         {/* 顶部 */}

         <div className={style.top}>
            <div className={style.content}>
                <div onClick={()=>{navigate(-1)}}><ArrowLeft style={{fontSize:'20px',fontWeight:'bolder'}} /></div>
                <div className={style.iconDivider}></div>
                <div onClick={()=>{navigate('/zhu')}}><WapHome style={{fontSize:'20px',fontWeight:'bolder',paddingRight:'5px'}} /></div>
            </div>
            <h2>考勤详情</h2>
            <div className={style.content}>
                <div><WeappNav style={{fontSize:'25px',fontWeight:'bolder',paddingLeft:'5px',paddingTop:'5px'}} /></div>
                <div className={style.iconDivider}></div>
                <div><div className={style.circleBorder}>
  <div className={style.circleInner}></div>
</div></div>
            </div>
        </div>
        {/* 用户信息 */}
        {list.map((item,index)=>{
          return(
        <div key={item._id} className={style.profileCard}>
      <div className={style.profileHeader}></div>
      <div className={style.profileInfo}>
        <div className={style.avatarWrapper}>
          <img
            className={style.avatar}
            src={item.imgs}
            alt="avatar"
          />
        </div>
        <div className={style.userInfo}>
          <div className={style.userName}>{item.username}</div>
          <div className={style.userDept}>{item.bumen}</div>
        </div>
        <div className={style.userRole}>
          <button className={style.roleBtn}>
            <div className={style.roleCn}>{item.zhiye}</div>
            <div className={style.roleEn}>{item.zhiye=='经理'?'Managere':'Member'}</div>
          </button>
        </div>
      </div>
    </div>
      )
    })}
    <div className={style.container}>
      <Form>  {/* 添加 Form 包裹 */}
        <div className={style.attendanceDate}>
          <span className={style.label}>考勤时间：</span>
          <div className={style.dateBox}>
            <Form.Item
              name='birthday'
              trigger='onConfirm'
              initialValue={new Date(attendanceData?.date)}
            >
              <DatePicker>
                {value =>
                  value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
                }
              </DatePicker>
            </Form.Item>
          </div>
        </div>
      </Form>
      <div className={style.infoRow}>
        <span>打卡时间：{attendanceData?.morningTime}</span>
      </div>
      <div className={style.infoRow}>
        <span>考勤状态：</span>
        <span className={style.statusLate}>迟到</span>
      </div>
      <div className={style.infoRow}>
        <span>迟到扣款：50元</span>
        <div style={{ marginLeft: '10px', display: 'inline-block' }}>
          <Shaxiang />
        </div>
      </div>
      <textarea
        className={style.remark}
        placeholder="备注说明"
        rows={6}
      />
      <div className={style.buttonWrapper}>
        <button className={style.abnormalBtn} onClick={()=>{navigate('/erratt', { state: { date: attendanceData?.date } })}}>异常考勤申报</button>
      </div>
    </div>
    </div>
  )
}
